<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>我的服务 - AI简历生成应用</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="bg-gray-50 pb-20 pt-14">
    <!-- 顶部导航栏 -->
    <div class="bg-white shadow fixed top-0 left-0 right-0 z-10">
      <div
        class="h-14 flex items-center justify-center relative px-4 max-w-md mx-auto"
      >
        <a href="index.html" class="absolute left-4">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-5 w-5 text-gray-600"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M15 19l-7-7 7-7"
            />
          </svg>
        </a>
        <h1 class="text-lg font-medium">我的服务</h1>
      </div>
    </div>

    <!-- 会员状态 -->
    <div class="px-4 mt-4">
      <div
        class="bg-gradient-to-r from-purple-500 to-indigo-600 rounded-xl p-5 shadow"
      >
        <div class="flex justify-between items-center">
          <div>
            <div class="flex items-center">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-5 w-5 text-yellow-300 mr-1"
                viewBox="0 0 20 20"
                fill="currentColor"
              >
                <path
                  d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"
                />
              </svg>
              <span class="text-white font-medium">标准会员</span>
            </div>
            <div class="text-purple-100 text-sm mt-1">有效期至: 2023-06-25</div>
          </div>
          <div>
            <a
              href="../service/detail.html?type=vip"
              class="inline-block mt-3 bg-white text-purple-600 px-3 py-1.5 rounded-lg text-sm font-medium"
              >续费会员</a
            >
          </div>
        </div>
        <div class="mt-4">
          <div
            class="flex items-center justify-between text-sm text-purple-100"
          >
            <span>剩余天数</span>
            <span>29天</span>
          </div>
          <div class="mt-2 bg-purple-300 bg-opacity-30 rounded-full h-2">
            <div class="bg-white h-2 rounded-full w-11/12"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 服务列表 -->
    <div class="px-4 mt-4">
      <h2 class="text-base font-medium text-gray-900 mb-3">我的服务包</h2>

      <!-- 基础优化服务 -->
      <div class="bg-white rounded-xl shadow p-4 mb-4">
        <div class="flex items-start">
          <div
            class="w-14 h-14 bg-purple-100 rounded-lg flex items-center justify-center mr-3 flex-shrink-0"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-7 w-7 text-purple-600"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
              />
            </svg>
          </div>
          <div class="flex-1">
            <h3 class="text-base font-medium text-gray-900">简历基础优化</h3>
            <p class="text-sm text-gray-600 mt-1">
              AI自动优化简历内容，提升简历质量
            </p>
            <div class="flex justify-between items-center mt-3">
              <div class="flex items-center">
                <span class="text-sm text-gray-500 mr-2">剩余次数:</span>
                <span class="text-purple-600 font-medium">2次</span>
              </div>
              <a
                href="../resume/list.html"
                class="bg-purple-600 text-white py-1.5 px-4 rounded-md text-sm"
                >立即使用</a
              >
            </div>
          </div>
        </div>
      </div>

      <!-- 进阶优化服务 -->
      <div class="bg-white rounded-xl shadow p-4 mb-4">
        <div class="flex items-start">
          <div
            class="w-14 h-14 bg-amber-100 rounded-lg flex items-center justify-center mr-3 flex-shrink-0"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-7 w-7 text-amber-500"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"
              />
            </svg>
          </div>
          <div class="flex-1">
            <h3 class="text-base font-medium text-gray-900">简历进阶优化</h3>
            <p class="text-sm text-gray-600 mt-1">
              高级AI定制，针对特定岗位量身定制简历内容
            </p>
            <div class="flex justify-between items-center mt-3">
              <div class="flex items-center">
                <span class="text-sm text-gray-500 mr-2">剩余次数:</span>
                <span class="text-purple-600 font-medium">1次</span>
              </div>
              <a
                href="../resume/list.html"
                class="bg-purple-600 text-white py-1.5 px-4 rounded-md text-sm"
                >立即使用</a
              >
            </div>
          </div>
        </div>
      </div>

      <!-- 模板服务 -->
      <div class="bg-white rounded-xl shadow p-4 mb-4">
        <div class="flex items-start">
          <div
            class="w-14 h-14 bg-emerald-100 rounded-lg flex items-center justify-center mr-3 flex-shrink-0"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-7 w-7 text-emerald-500"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
              />
            </svg>
          </div>
          <div class="flex-1">
            <h3 class="text-base font-medium text-gray-900">精选简历模板</h3>
            <p class="text-sm text-gray-600 mt-1">
              多种专业设计模板，满足不同行业需求
            </p>
            <div class="flex justify-between items-center mt-3">
              <div class="flex items-center">
                <span class="text-sm text-gray-500 mr-2">状态:</span>
                <span class="text-emerald-600 font-medium">已开通</span>
              </div>
              <a
                href="../resume/list.html"
                class="bg-purple-600 text-white py-1.5 px-4 rounded-md text-sm"
                >立即使用</a
              >
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 推荐服务 -->
    <div class="px-4 mt-6 mb-6">
      <h2 class="text-base font-medium text-gray-900 mb-3">推荐服务</h2>

      <div class="bg-white rounded-xl shadow overflow-hidden">
        <div class="p-4">
          <div class="flex items-center">
            <div
              class="w-12 h-12 bg-sky-100 rounded-lg flex items-center justify-center mr-3"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-6 w-6 text-sky-500"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                />
              </svg>
            </div>
            <div>
              <h3 class="text-base font-medium text-gray-900">会员服务</h3>
              <p class="text-sm text-gray-600 mt-1">
                30天内不限次数使用所有优化功能
              </p>
            </div>
          </div>
          <div class="flex justify-between items-center mt-3">
            <div class="text-purple-600 font-medium">
              ¥99.9<span class="text-xs text-gray-500 ml-1">/ 月</span>
            </div>
            <a
              href="../service/detail.html?type=vip"
              class="bg-purple-600 text-white py-1.5 px-4 rounded-md text-sm"
              >立即购买</a
            >
          </div>
        </div>
        <div class="bg-gray-50 px-4 py-2 border-t border-gray-100">
          <div class="text-xs text-gray-500">
            购买会员服务可享受30天内不限次数使用所有优化功能，还包含简历专家一对一指导和面试技巧指南
          </div>
        </div>
      </div>
    </div>

    <!-- 底部标签栏 -->
    <iframe
      src="../common/tabbar.html"
      class="fixed bottom-0 left-0 w-full h-16 border-none"
    ></iframe>
  </body>
</html>
